<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head>
    <th:block th:insert="~{include :: header('新增广告图')}" />
    <style>
        /*选择文件上传*/
        .new-contentarea {
            overflow:hidden;
            margin: 0 auto;
            position:relative;float:left;
        }
        .new-contentarea label {
            width:100%;
            height:100%;
            display:block;
        }
        .new-contentarea input[type=file] {
            width: 64px;
            height: 35px;
            background: #333;
            margin: 0 auto;
            position: absolute;
            right: 155%;
            margin-right: -94px;
            top:0;
            right/*\**/:0px\9;
            margin-right/*\**/:0px\9;
            width/*\**/:10px\9;
            opacity:0;
            filter:alpha(opacity=0);
            z-index:2;
        }
        a.upload-img{
            width:59px;
            display: inline-block;
            margin-bottom: 10px;
            height:33px;
            line-height: 37px;
            font-size: 14px;
            color: #FFFFFF;
            background-color: #f38e81;
            border-radius: 3px;
            text-decoration:none;
            cursor:pointer;
            border: 0px #fff solid;
            box-shadow: 0px 0px 5px #B0B0B0;
        }
        a.upload-img:hover{
            background-color: #ec7e70;
        }
        .tc{text-align:center;}
    </style>
</head>
<body class="hold-transition">
<div class="container-fluid mt-2 mb-2">
    <form class="form-horizontal m" id="form-images-add">
        <div class="form-group row">
            <label class="col-sm-2 col-form-label is-required text-sm-right">图片标题</label>
            <div class="col-sm-6">
                <input name="title" class="form-control" type="text" required>
            </div>
        </div>
        <div class="form-group row">
            <label class="col-sm-2 col-form-label text-sm-right">图片描述</label>
            <div class="col-sm-6">
                <input name="intro" class="form-control" type="text">
                <span style="color: red">(仅后台描述前台没有展示效果除个别分类,如首页课程互动则会用到)</span>
            </div>
        </div>
        <div class="form-group row">
            <label class="col-sm-2 col-form-label is-required text-sm-right">所属频道</label>
            <div class="col-sm-4">
                <select name="channelId" class="form-control m-b" th:with="channels=${channelList}">
                    <option value="0" th:selected="${channelId == 0}">无</option>
                    <option th:each="dict : ${channels}" th:text="${dict.channelName}" th:value="${dict.channelId}" th:selected="${channelId == dict.channelId}"></option>
                </select>
            </div>
        </div>
        <div class="form-group row">
            <label class="col-sm-2 col-form-label is-required text-sm-right">图片类型</label>
            <div class="col-sm-4">
                <select name="typeId" class="form-control m-b" th:with="type=${advertTypeList}">
                    <option th:each="dict : ${type}" th:text="${dict.typeName}" th:value="${dict.typeId}"></option>
                </select>
            </div>
        </div>
        <div class="form-group row">
            <label class="col-sm-2 col-form-label text-sm-right">跳转链接</label>
            <div class="col-sm-4">
                <input name="linkUrl" class="form-control"  type="text">
            </div>
        </div>
        <div class="form-group row">
            <label class="col-sm-2 col-form-label is-required text-sm-right">排序</label>
            <div class="col-sm-4">
                <input name="sort" class="form-control" value="0" type="text" required>
            </div>
        </div>
        <div class="form-group row">
        <label class="col-sm-2 col-form-label is-required text-sm-right">图片路径</label>
        <div class="col-sm-4">
            <input id="logoImg"  class="form-control" name="imageUrl"  type="text">
        </div>
    </div>
        <div class="form-group row">
            <label class="col-sm-2 col-form-label text-sm-right">图片</label>
            <div class="col-sm-8">
                <img id="showImage" style="width: 350px;height: 200px; border: 1px solid #C9C9C9;float: left" src='/static/logo-big.png'/>
                <div class="new-contentarea tc" style="margin-left: 5px;line-height: 200px">
                    <a href="javascript:void(0)"  class="upload-img" > <label for="avatar">上传</label> </a>
                    <input type="file" onchange="ImgUpdate()" class="" value="" name="avatar" id="avatar" accept="image/*"/>
                </div>
                <span style="color: red;line-height: 200px;margin-left: 3px">(请上传1920*460(长X宽)的图片)</span>
            </div>
        </div>
        <div class="form-group row">
            <label class="col-sm-2 col-form-label text-sm-right">背景色</label>
            <div class="col-sm-4">
                <input name="color" class="form-control"  type="color">
            </div>
        </div>
        <div class="row">
            <label class="col-sm-2"></label>
            <div class="col-sm-10">
                <input type="hidden" name="channelId" th:value="${channelId}">
                <button type="button" class="btn btn-primary" onclick="submitHandler()"><i class="fa fa-check"></i>保 存</button>&nbsp;
                <button type="button" class="btn btn-danger" onclick="window.parent.layer.closeAll()"><i class="fa fa-reply-all"></i>关 闭 </button>
            </div>
        </div>
    </form>
</div>
<th:block th:insert="~{include :: footer}" />
<script type="text/javascript">

    var prefix = "/advert";

    $("#form-images-add").validate({
        focusCleanup: true
    });

    function submitHandler() {
        if ($.validate.form()) {
            var src =$("#logoImg").val();
            if(src == ""){
                $.modal.alertError("请上传封面图");
                return false;
            }
            var data = $("#form-images-add").serializeArray();
            $.operate.save(prefix + "/add.json", data);
        }
    }

    function ImgUpdate() {
        var file = $('#avatar')[0].files[0];
        var formData = new FormData();
        formData.append("file",file);
        $.ajax({
            url: "/upload/image.json",
            data: formData,
            type: "post",
            processData: false,
            contentType: false,
            dataType:"json",
            mimeType:"multipart/form-data",
            success: function(result) {
                if(result.code === 0){
                    $("#logoImg").val(result.data.src);
                    $("#showImage").attr("src",result.data.src);
                    window.layer.msg('上传成功', {icon: 1});
                }else{
                    window.layer.msg('上传失败', {icon: 2});
                }

            }
        })
    }
</script>
</body>
</html>